<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-left">
          <div class="logo">
            <img src="@/assets/static/images/logo.png" alt="logo" style="height:32px;">
          </div>
          <div class="divider"></div>
          <el-menu mode="horizontal" :ellipsis="false" class="main-nav" background-color="transparent" text-color="#fff"
            active-text-color="#00b881" style="border-bottom:none;" @select="handleMenuSelect"
            :default-active="activeMenu">
            <!-- <el-menu-item index="1">发现</el-menu-item> -->
            <el-sub-menu index="2">
              <template #title>彩种</template>
              <el-menu-item index="/omission/statistics">遗漏统计</el-menu-item>
              <el-menu-item index="/omission/number">号码</el-menu-item>
              <el-menu-item index="/omission/group">号码组</el-menu-item>
              <el-menu-item index="/omission/maintain">彩种维护</el-menu-item>
            </el-sub-menu>
            <!-- <el-menu-item index="3">机构客户</el-menu-item> -->
            <!-- <el-sub-menu index="4">
              <template #title>新手学院</template>
              <el-menu-item index="4-1">新手教程</el-menu-item>
              <el-menu-item index="4-2">视频课程</el-menu-item>
            </el-sub-menu> -->
            <el-sub-menu index="5">
              <template #title>更多</template>
              <el-menu-item index="/filter-tool">过滤工具</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
        <div class="header-right">
          <!-- <div class="search-box">
            <el-input placeholder="搜索币对" :prefix-icon="Search" class="custom-search-input"
              style="width: 210px; height: 34px;"></el-input>
          </div> -->
          <!-- <el-button class="login-btn">登录</el-button>
          <el-button class="register-btn">注册</el-button> -->
          <div class="divider"></div>
          <el-dropdown>
            <span class="icon-btn"><el-icon>
                <Download />
              </el-icon></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>下载中心</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown>
            <span class="icon-btn"><el-icon>
                <Bell />
              </el-icon></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>通知提醒</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown>
            <span class="icon-btn"><el-icon>
                <QuestionFilled />
              </el-icon></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>帮助中心</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown>
            <span class="icon-btn"><el-icon>
                <SetUp />
              </el-icon></span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>切换语言</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script setup>

import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 记录当前激活菜单项
const activeMenu = ref('1');

// 根据路由变化自动同步高亮
watch(
  () => route.path,
  (newPath) => {
    // 只处理以 / 开头的 index
    if (["/omission/statistics", "/omission/number", "/omission/group", "/omission/maintain"].includes(newPath)) {
      activeMenu.value = newPath;
    } else {
      // 其他菜单项可根据 index 设定
      activeMenu.value = '1';
    }
  },
  { immediate: true }
);

const handleMenuSelect = (index) => {
  activeMenu.value = index;
  // 只跳转以 / 开头的 index
  if (index.startsWith('/')) {
    router.push(index);
  }
}

</script>

<style lang="scss" scoped>
@use "@/assets/global.scss" as *;

.common-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background: $primary-bg;
  color: $primary-color;
  padding: 1em;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.divider {
  width: 1px;
  height: 24px;
  background: $border-color;
  margin-left: 1em;
  margin-right: 0.5em;
}

.main-nav {
  min-width: 0;
  --el-menu-bg-color: transparent;
  --el-menu-item-height: 50px;
  --el-menu-hover-bg-color: rgba(8, 43, 32, 0);
  --el-menu-active-color: $accent-color;
}

// 减小每个菜单项的左右间距（直接作用于所有el-menu-item）
:deep(.el-menu--horizontal .el-menu-item),
:deep(.el-menu--horizontal .el-sub-menu) {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 100%;
}

.search-box {
  display: flex;
  align-items: center;
}

.custom-search-input :deep(.el-input__wrapper) {
  background: #404040 !important;
  border-radius: 12px;
  min-height: 20px;
  box-shadow: none;
  border: 1px solid $border-color;
}

.custom-search-input :deep(.el-input__inner) {
  background: transparent !important;
  color: #222;
  font-size: 13px;
  height: 18px;
  line-height: 36px;
}

.custom-search-input :deep(.el-input__prefix) {
  color: $secondary-color;
}

.login-btn,
.register-btn {
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.login-btn {
  background: transparent;
  color: #fff;
  border: 1px solid #2a2e34;
}

.register-btn {
  background: transparent;
  color: #fff;
  border: 1px solid #2a2e34;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  margin: 0 2px;
  font-size: 20px;
  transition: background 0.2s;
}

.icon-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.el-main {
  display: flex;
  padding: 1em;
  background: $secondary-bg;
  height: calc(100vh - 50px);
}

.el-footer {
  background: $primary-bg;
  color: $primary-color;
  padding: 1em;
  // height: 500px;
}
</style>

<style lang="scss">
.el-menu--popup {
  background: #fff !important;
}

.el-menu--popup .el-menu-item {
  color: #222 !important;
}
</style>